<template>
    <div class="container">
        <!-- 导航栏区域开始 -->
        <TridentNavBar>
            <template #left><i class="iconfont icon-zuojiantou"></i></template>
            <template #default>群聊成员({{ groupChat.member.length }})</template>
            <template #right>
                <span @click="handleDeleteMember" style="border: 1px solid #fff;padding: 5px 12px;border-radius: 6px;">删除</span>
            </template>
        </TridentNavBar>
        <!-- 导航栏区域结束 -->

        <!-- 搜索区域开始 -->
        <van-search
            v-model="username"
            show-action
            placeholder="搜索"
            class="search-wrap"
        >
            <template #action>
                <div @click="handleSearchMember">搜索</div>
            </template>
        </van-search>
        <!-- 搜索区域结束 -->

        <!-- 成员区域开始 -->
        <div class="member-wrap">
            <van-index-bar
                :sticky-offset-top="99"
                highlight-color="#27BA9B"
                :sticky="true"
                :index-list="Object.keys(memberList)"
            >
                <div class="contact-box" v-for="(key, index) in Object.keys(memberList)" :key="index">
                    <van-index-anchor :index="key"/>
                    <div class="contact-item" v-for="(value, index) in memberList[key]" :key="index">
                        <!-- 复选框区域 -->
                        <van-checkbox v-model="value.is_check" @change="handleChange($event, value.uid)" checked-color="#27BA9B"/>

                        <!-- 头像区域 -->
                        <div class="image-panel">
                            <van-image
                                width="50"
                                height="50"
                                :src="value.avatar_url ? global.MINIO_FILE_DOMAIN + value.avatar_url : 'src/assets/images/default_avatar.png'"
                                fit="contain"
                            />
                        </div>

                        <!-- 用户名区域 -->
                        <div class="name-panel">{{value.username}}</div>
                    </div>
                </div>
            </van-index-bar>

            <!-- 返回顶部区域开始 -->
            <van-back-top bottom="100" right="10"><i class="iconfont icon-top" style="font-size: 30px;"></i></van-back-top>
         </div>
        <!-- 成员区域结束 -->
    </div>
</template>

<script lang="ts" setup>
import { reqGroupChatDetailAPI, reqRemoveMemberAPI } from '@/apis/groupChat'
import type { GroupChat, Member, RemoveMemberParams } from '@/types/groupChat'
import { pinyin } from 'pinyin-pro'
import { showConfirmDialog, showSuccessToast, showToast } from 'vant'
import { inject, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

// 全局属性
const global: any = inject('global')

onMounted(async() => {
    await getGroupChatInfo()
})


// ------------------ 处理删除成员开始 ------------------
const params = ref<RemoveMemberParams>({
    gid: route.query.gid as never,
    uids: ''
})

// 处理复选框变化
const handleChange = (e: any, uid: string) => {
    let uids = params.value.uids ? params.value.uids.split(',') : []

    if (e) {
        uids.push(uid)
    } else {
        const index = uids.findIndex(item => item == uid)
        uids.splice(index, 1)
    }

    params.value.uids = uids.join()
}

// 删除成员
const handleDeleteMember = () => {
    if (params.value.uids == '') {
        showToast('请选择要删除的成员')
        return false
    }

    showConfirmDialog({
        message: '确定要删除成员?',
        confirmButtonColor: '#27BA9B'
    })
    .then(async() => {
        await reqRemoveMemberAPI(params.value)

        // 删除变量中的成员
        params.value.uids.split(',').forEach(uid => {
            Object.keys(memberList.value).forEach(key => {
                const index = memberList.value[key].findIndex((item: Member) => item.uid+'' == uid)
                if (index != -1) {
                    if (memberList.value[key].length > 1) { // 如果只有一个成员则删除
                        memberList.value[key].splice(index, 1)
                    } else {
                        delete memberList.value[key]
                    }
                }
            })
        })

        showSuccessToast('删除成员成功')
    })
    .catch(() => {
        // on cancel
    })
}
// ------------------ 处理删除成员结束 ------------------.value



// ------------------ 处理搜索成员开始 ------------------
const username = ref<string>('')

// 搜索成员
const handleSearchMember = () => {
    handleMemberList()
}
// ------------------ 处理搜索成员结束 ------------------



// ------------------ 处理群聊信息开始 ------------------
// 群聊信息
const groupChat = ref<GroupChat>({
    id: 0,
    name: '',
    member: [],
    note: '',
    update_time: '',
    create_time: ''
})

// 成员列表
const memberList: any = ref({})

// 获取群聊信息
const getGroupChatInfo = async () => {
    const result = await reqGroupChatDetailAPI(route.query.gid as never)
    groupChat.value = result.data
    handleMemberList()
}

// 数量成员列表数据
const handleMemberList = () => {
    let tempMemberList: any = {}
    groupChat.value.member.forEach(item => {
        if (username.value != '') {
            if (item.username == username.value) {
                let initial = pinyin(item.username, {pattern: 'first', toneType: 'none' }).substr(0, 1).toLocaleUpperCase()
    
                if (!tempMemberList[initial]) {
                    tempMemberList[initial] = []
                }

                tempMemberList[initial].push(item)
            }
        } else {
            let initial = pinyin(item.username, {pattern: 'first', toneType: 'none' }).substr(0, 1).toLocaleUpperCase()
    
            if (!tempMemberList[initial]) {
                tempMemberList[initial] = []
            }

            tempMemberList[initial].push(item)
        }
    });

    memberList.value = Object.keys(tempMemberList).sort().reduce((acc: any, key) => {
        acc[key] = tempMemberList[key];
        return acc;
    }, {});
}
// ------------------ 处理群聊信息结束 ------------------
</script>

<style scoped lang="scss">
page,
.container {
    height: 100vh;

    // 搜索区域开始
    .search-wrap {
        position: fixed;
        top: 45px;
        left: 0;
        width: 100%;
        z-index: 100;
    }

    // 成员区域开始
    .member-wrap {
        margin-top: 108px;
        padding-bottom: 10px;
        .contact-box {
            padding-left: 10px;
            padding-right: 20px;
            .contact-item {
                background-color: #fff;
                display: flex;
                align-items: center;
                padding-left: 4px;
                border-radius: 6px;
                &:last-child .name-panel {
                    border-bottom: none;
                }
                .image-panel {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 45px;
                    height: 45px;
                    border-radius: 5px;
                    overflow: hidden;
                    margin-left: 15px;
                    border: 1px solid #e6e6e6;
                }
                .name-panel {
                    flex: 1;
                    margin-left: 15px;
                    color: #000;
                    font-size:14px;
                    border-bottom: 1px solid #EDEDED;
                    padding: 25px 0;
                }
            }
        }
    }
}
</style>